<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri ="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<div class="page-header">
	<h3>用户列表</h3>
</div>
<table class="table table-striped table-hover .table-condensed">
	<thead>
		<tr>
			<th>用户名</th>
			<th>邮箱</th>
			<th>创建时间</th>
			<th>修改时间</th>
			<th>角色</th>
		</tr>
	</thead>
	<tbody>
		<c:if test="${result.success eq false}">获取数据失败</c:if>
		<c:if test="${result.success eq true}">
			<c:forEach var="user" items="${result.object.list}">
				<tr>
					<td>${fn:escapeXml(user.username)}</td>
					<td>${fn:escapeXml(user.email)}</td>
					<td><fmt:formatDate value="${user.created}" type="both"
							pattern="yyyy-MM-dd HH:mm:ss" /></td>
					<td><fmt:formatDate value="${user.modified}" type="both"
							pattern="yyyy-MM-dd HH:mm:ss" /></td>
					<td>${user.role}</td>
					<td><a class="btn btn-default editUser" uname="${fn:escapeXml(user.username)}" email="${fn:escapeXml(user.email)}"
						role="${user.role}" uid="${user.id}">修改</a>
						<a uid="${user.id}" class="btn btn-default delUser">删除</a></td>
				</tr>
			</c:forEach>
		</c:if>
	</tbody>
</table>
<div id="layPage" class="text-center"></div>
<div id="editPanel" class="panel panel-default"
	style="display: none; margin-bottom: 0; width: 300px;">
	<div class="panel-heading">
		<h3 class="panel-title">修改名称</h3>
	</div>
	<div class="panel-body">
		<form role="form">
			<div class="form-group">
				<input name="id" type="text" hidden="hidden" /><input name="name"
					type="text" hidden="hidden" /> <label for="name">邮箱</label><input
					name="email" type="email" class="form-control" /><br /> <label
					for="description">角色</label> <select name="role"
					class="form-control">
					<option>admin</option>
					<option>manager</option>
				</select> <br /> <label for="description">密码(可不填，代表不修改)</label> <input
					name="password" type="password" class="form-control" /> <br /> <label
					for="name">分配产品</label><br />
				<div id="products"></div>

			</div>
			<br /> <input name="submit" type="submit" value="确认"
				class="btn btn-default pull-right" />
		</form>
	</div>
</div>
<script>
	function checkBox(id, name) {
		return '<label class="checkbox-inline"><input name="productIds" type="checkbox" value="'+ id +'">'
				+ name + '</label>';
	}
	$(function() {
		//分页插件
		laypage({
		    cont: 'layPage',
		    pages: '${result.object.pages}',
		    curr: '${result.object.pageNum}',
		    jump: function(obj,first){
		    	if(!first){
		    		$("#rightDiv").load("${basePath}/user/list?pageNum=" + obj.curr);
		    	}
		    }
		})
		
		var productsHtml = "";
		$.get("${basePath}/product/all", function(data) {
			var products = data.result.object;
			var str
			for ( var i in products) {
				productsHtml += checkBox(products[i].id, filterXSS(products[i].name));
			}
		});
		$(".previous")
				.click(
						function() {
							$("#rightDiv")
									.load(
											"${basePath}/user/list?pageNum=${result.object.pageNum-1}");
						});
		$(".next")
				.click(
						function() {
							$("#rightDiv")
									.load(
											"${basePath}/user/list?pageNum=${result.object.pageNum+1}");
						});
		$(".delUser").click(function() {
			var deleteId = $(this).attr("uid");
			layer.confirm('确定要删除', {
				icon : 3,
				title : '提示'
			}, function(index) {
				$.post("${basePath}/user/delete", {
					userId : deleteId
				}, function(data) {
					if (data.result.success) {
						layer.msg(data.result.message, {
							icon : 1,
							time : 1000
						}, function() {
							$("#rightDiv").load("${basePath}/user/list");
						});
					} else {
						layer.msg(data.result.message, {
							icon : 2
						});
					}
				});
				layer.close(index);
			});
		});
		$(".editUser").click(
				function() {
					$("#products").html(productsHtml);
					var uid = $(this).attr("uid");
					$("input[name=name]").val($(this).attr("uname"));
					$("input[name=id]").val(uid);
					$("input[name=email]").val($(this).attr("email"))
					$("select[name=role]").val($(this).attr("role"))
					window.editLayer = layer.open({
						type : 1,
						title : false,
						closeBtn : 1,
						shadeClose : true,
						content : $('#editPanel')
					});
					$.get("${basePath}/user/product", {
						userId : uid
					}, function(data) {
						var products = data.result.object;
						for ( var i in products) {
							$(
									"input[name=productIds][value="
											+ products[i].id + "]").attr(
									"checked", "checked");
						}
					});
				});
		$("form").submit(function(e) {
			var id = $("input[name=id]").val();
			var name = $("input[name=name]").val();
			var email = $("input[name=email]").val();
			var role = $("select[name=role]").val();
			var password = $("input[name=password]").val();
			var productIds = [];
			$("input[name=productIds]:checked").each(function() {
				productIds.push($(this).val());
			});
			//处理空字符串
			if (password == "") {
				password == null;
			}
			if (email == null || email == "") {
				layer.tips('用户名不能为空', 'input[name=username]', {
					tips : 3
				});
			} else {
				$.ajax({
					type : 'post',
					traditional : true,
					url : '${basePath}/user/update',
					data : {
						id : id,
						username : name,
						email : email,
						password : password,
						role : role,
						productIds : productIds
					},
					success : function(data) {
						if (data.result.success) {
							layer.msg(data.result.message, {
								icon : 1,
								time : 1000
							}, function() {
								layer.close(editLayer);
								$("#rightDiv").load("${basePath}/user/list");
							});
						} else {
							layer.msg(data.result.message, {
								icon : 2
							});
						}
					}
				});
			}
			return false;
		});
	});
</script>